<template>
	<view class="content">
		<rf-navbar title="孩子档案" @click="onBack"></rf-navbar>
		<view class="w100 header">
			<image class="header-bg" src="../static/images/observe/header-bg.png" mode="widthFix">
			</image>
			<!-- 背景 -->
			<image class="header-mp" src="../static/images/observe/header_mp.png" mode="widthFix"></image>
			<!-- 孩子信息 -->
			<view class="header-mp" style="display: flex; align-items: center; padding: 20px;top: 25px;">
				<view>
					<image class="header-logo icon-default-avatar" mode="aspectFill" v-if="!childInfo.headSculpture">
					</image>
					<rf-avatar :avatarUrl="childInfo.headSculpture" :gender="childInfo.childSex" size="188" ba
						badgeSize="50" v-else></rf-avatar>
				</view>
				<view class="header-text">
					<view style="display: flex;align-items: center;">
						<view class="name">{{childInfo.childName}}</view>
						<view class="icon" @click="shareChildShow=true"
							v-if="childInfo.shareList && childInfo.shareList.length>0"></view>
					</view>
					<view class="age">
						<text>{{getChildAge(childInfo)}}</text><text
							style="margin-left: 20rpx;">{{childInfo.beBornDt}}</text>
					</view>
					<view class="age">家长：{{childInfo.parentName}}</view>
					<view class="age">电话：{{childInfo.parentPhone}}</view>
				</view>
				<view>
					<view class="header-dian" @click="onShowMenu">
						<image class="icon icon-more"></image>
					</view>

				</view>
			</view>

			<!-- <view class="now-date fl">
				<span class="f44 bold record">观察记录</span>
				<span class="f32 bold ml10 recordNumber">({{tableList.length!=undefined?tableList.length:"0"}})</span>
			</view> -->
			<view class="tab">
				<view :class="{highlight_tab:currentTabidx==0,normal_tab:currentTabidx!=0}" @click="selectTab(0)">
					<view class="text">观察记录</view>
					<view class="bottom_line"></view>
				</view>

				<view :class="{highlight_tab:currentTabidx==1,normal_tab:currentTabidx!=1}" style="margin-left: 40rpx;"
					@click="selectTab(1)">
					<view class="text">学期评价</view>
					<view class="bottom_line"></view>
				</view>
			</view>
		</view>
		<!-- 观察记录 -->
		<view class="observe-body" v-if="currentTabidx==0">
			<u-sticky :offset-top="navbarHeight">
				<view class="sticky_container">
					<view class="date" v-if="currentTabidx==0">
						<view class="now-date fl">
							<span class="f44 bold">{{ nowDay }}</span>
							<span class="f32 bold ml10">{{ nowMonth }}月</span>
						</view>
						<!-- <view class="select-date fr" @click="selectDateShow = true"> -->
						<view class="select-date fr">
							<div class="f32 bold">{{ nowYear }}</div>
						</view>
					</view>
				</view>
			</u-sticky>
			<view class="tableView">
				<view v-for="(item, idx) in tableList" class="cell-handler" :key="index" :data-time="item.createTime">
					<view class="tableCell">
						<view class="leftView">
							<span class="day">{{ item.nowDay }}</span>
							<span class="month">{{ item.nowMonth }}月</span>
						</view>
						<view class="rightView">
							<!-- <span class="name f32 bold">{{ tableList.name }}</span> -->
							<view class="content f28">
								<!-- 观察文字 -->
								<view>{{ item.content }}</view>
								<!-- 观察图片 -->
								<view class="image" v-if="item.imagesList.length <= 1">
									<view v-for="(imgs,imgIdx) in item.imagesList">
										<video :autoplay="false" v-if="isVideoUrl(imgs.url)" :src="imgs.url"></video>
										<image v-else :src="imgs.url" mode="aspectFill" :key="imgIdx"
											@click="lookImg([item.imagesList,imgIdx])" />
									</view>
								</view>
								<view class="image" v-else>
									<uni-grid :column="3" :showBorder="false">
										<uni-grid-item v-for="(ele, row) in item.imagesList">
											<view class="" style="padding: 2px;;height: 100%;width: 100%;">
												<image style="width: 100%; height: 100%;" mode="aspectFill"
													:src="ele.url" @click="lookImg([item.imagesList, row])">
												</image>
											</view>
										</uni-grid-item>
									</uni-grid>
								</view>
							</view>
							<view class="editView">
								<span class="f24 year-month">{{ formatDate(item.createTime) }}</span>
								<!-- 	<span class="delete" @click="handleDelete(item.id, idx)">
									<image class="icon-delete"></image>
								</span>
								<span class="edit" @click="handleEditObserve(item)">
									<image class="icon-edit"></image>
								</span> -->
							</view>
							<view class="analyze">
								<image class="analyze-icon icon-star" />
								<image class="analyze-title-bottom icon-star-line" />
								<u-collapse ref="collapseView" :border="false" @close="handleAnalyzeClose(idx)"
									@open="handleAnalyzeOpen(idx)">
									<u-collapse-item ref="collapseItem" class="f28" title="观察分析" :name="idx"
										:value="'超小助正在分析中'" v-if="item.status==2">
									</u-collapse-item>
									<u-collapse-item ref="collapseItem" class="f28" title="观察分析" :name="idx" :line="5"
										:value="item.expanded?'收起':'展开'" v-else>
										<view v-if="!item.aiAnalysis">
											<view>
												<text class="u-collapse-content text inline f28">
													还未进行分析…
												</text>
											</view>
										</view>
										<view v-else>
											<view style="display: flex;">
												<span class="order inline"></span>
												<text class="aiAnalysis-content text inline f28"
													:class="{showAllIN:item.expanded, hidetext:!item.expanded}">
													{{ item.aiAnalysis }}
												</text>
											</view>
										</view>

									</u-collapse-item>
								</u-collapse>

							</view>
							<view class="item-content" v-if="item.fileUrl" @click="copyBtn(item)">
								<image class="icon-word word">
								</image>
								<view class="left-content">观察记录文件:</view>
								<view class="right-content">
									<view class="text">{{item.fileUrl}}</view>
									<image class="icon-copy icon"></image>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="observe-body" v-if="currentTabidx==1">
			<view-share-evaluate :evaluateList="evaluateList"></view-share-evaluate>
		</view>
		<uni-load-more v-if="tableList.length > 0" :status="status" :contentText="contentText"></uni-load-more>

		<!-- 删除孩子观察确认提示框 -->
		<rf-alert :show="delConfirmShow" @close="delConfirmShow=false" @confirm="delConfirm" title="删除孩子"
			desc="确定要删除孩子及其观察记录吗？"></rf-alert>


		<view class="delete-popup">
			<u-popup :show="deletePopupShow" mode="center" @close="deletePopupShow = false">
				<view>
					<image class="success-icon icon-success"></image>
					<text class="f32 bold success-tips">删除成功</text>
					<text class="f28 success-text">已为您删除当前动态</text>
				</view>
			</u-popup>
		</view>
		<!-- 管理孩子信息，分享，编辑，删除 -->
		<view class="menu-popup">
			<u-popup :show="showMenu" mode="bottom" :closeable="true" @close="onCloseMenu">
				<view style="margin-top: 80rpx;">
					<view class="cell"><button class="btn" @click="delKidInfo">删除</button></view>
					<view class="cell"><button class="btn" open-type="share">分享</button></view>
					<view class="cell"><button class="btn" @click="onClickEdit">编辑</button></view>
				</view>
			</u-popup>
		</view>
		<rf-shareChild :show="shareChildShow" :child="childInfo" @confirm="shareChildShow=false"
			@set="shareChildSet"></rf-shareChild>

		<!-- 筛选时间 -->
		<view class="popup">
			<u-datetime-picker ref="myElement" :show="selectDateShow" v-model="dateDaya" mode="year-month"
				confirmColor="#58C866" @cancel="selectDateShow = false" title="选择日期"
				v-on:confirm="confirmDate"></u-datetime-picker>
		</view>


	</view>
</template>


<script>
	import CryptoJS from 'crypto-js'

	import {
		shareChild,
	} from '@/api/child.js'

	export default {
		data() {
			return {
				screenWidth: this.screenWidth,
				screenHeight: this.screenHeight,

				dragging: false, // 是否正在拖拽
				mouseX: 0, // 鼠标在元素内的X坐标
				mouseY: 0, // 鼠标在元素内的Y坐标
				left: 0, // 元素左上角距离父容器左侧的距离
				top: 0, // 元素左上角距离父容器顶部的距离

				shareChildShow: false,

				currentTabidx: 0,
				childInfo: {},
				dateStr: '',
				week: '',
				nowMonth: '',
				nowDay: '',
				nowYear: '',
				selectDateShow: false,
				dateDaya: Number(new Date()),
				tableList: [],
				evaluateList: [],
				analyzeBtn: '展开',
				deletePopupShow: false,
				params: {
					pageSize: 10,
					pageNum: 1,
					childId: '',
					month: "",
					year: "",
				},
				showMenu: false,
				menuList: [{
					name: '删除',
					value: 0,
				}, {
					name: '分享',
					value: 1,
				}, {
					name: '编辑',
					value: 2,
				}],
				delConfirmShow: false, // 删除确认窗口
				// 删除观察记录
				delId: "",
				delIndex: "",
				confirmShow: false, // 删除观察记录确认弹窗

				ageList: [
					[{
						'name': '全部',
						'value': "",
					}, {
						'name': '半岁',
						'value': "0.5",
					}, {
						'name': '一岁',
						'value': "1",
					}, {
						'name': '一岁半',
						'value': "1.5",
					}, {
						'name': '两岁',
						'value': "2",
					}, {
						'name': '两岁半',
						'value': "2.5",
					}, {
						'name': '三岁',
						'value': "3",
					}, {
						'name': '三岁半',
						'value': "3.5",
					}, {
						'name': '四岁',
						'value': "4",
					}, {
						'name': '四岁半',
						'value': "4.5",
					}, {
						'name': '五岁',
						'value': "5",
					}, {
						'name': '五岁半',
						'value': "5.5",
					}, {
						'name': '六岁',
						'value': "6",
					}, {
						'name': '六岁半',
						'value': "6.5",
					}, {
						'name': '七岁',
						'value': "7",
					}]
				],


				total: 0,
				status: "more",
				contentText: {
					contentdown: "查看更多",
					contentrefresh: "加载中...",
					contentnomore: "没有更多了",
				},

				is_load: true,

				keyStr: "kebHs3KrGOVSHkvH2HwA3g==", //加密密钥
				ivStr: "R04E+H1yM+uVBMo9enAZsw==", //矢量
			};
		},
		computed: {
			getChildAge() {
				return (val) => {

					for (let i = 0; i < this.ageList[0].length; i++) {
						if (this.ageList[0][i].value == val.childAge) {
							return this.ageList[0][i].name;
						}
					}
				}
			},
			navbarHeight() {
				return parseInt(this.navBarHeight, 10) + uni.upx2px(429) + 'px';
			}
		},
		mounted() {
			this.initTime();
		},
		onLoad(options) {
			const childId = options.childId;
			// this.params.childId = childId
			console.log("-------share---", childId);
			this.params.childId = this.aes_encrypt(childId);

			// 进行后续操作
			// this.getKidDetials(childid)
			// this.getList()
		},
		onShow() {
			this.getList()
		},
		onHide() {

			// this.tableList.
			for (var i = 0; i < this.tableList.length; i++) {
				this.tableList[i].expanded = false
			}
			if (this.tableList.length > 0) {
				this.$forceUpdate();
				this.$nextTick(() => {
					this.$refs.collapseView[0].init()
					// this.$refs.collapseItem[0].queryRect()
				})
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			console.log(res);
			console.log("res: " + JSON.stringify(res));
			if (res.from === 'button') {
				console.log("onShareAppMessage");

				return {
					title: this.childInfo.childName + "小朋友的观察档案",
					path: "/pages-sub/share/shareChild?observeid=" + this.observeid,
					// imageUrl: "https://superta.noboyun.com/static/share/default.png", //数据返回的图片数据
					success: function(res) {
						// 转发成功
						console.log(res)
					},
					fail: function(res) {
						// 转发失败
						console.log(res)
					}
				}
			} else { //用户点击右上角3个点分享（小程序端）
				return {
					path: "pages/observe/observe"
				};
			}
		},
		methods: {
			selectTab(e) {
				this.currentTabidx = e;
			},
			isVideoUrl(url) {
				console.log("-=-=--=-=-=--=-=" + url);
				if (!url) {
					return false
				}
				// 视频常见后缀名列表
				const videoExtensions = ['mp4', 'flv', 'avi', 'wmv', 'mov', 'mkv', 'rm', 'rmvb'];

				// 获取url的最后一部分（通常为文件名+后缀）
				const fileName = url.split('/').pop();

				// 分离出文件后缀名
				const fileExtension = fileName.split('.').pop().toLowerCase();

				// 判断后缀名是否在视频格式列表中
				return videoExtensions.includes(fileExtension);
			},
			formatDate(dataStr) {
				const date = new Date(dataStr);
				if (!isNaN(date)) {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					const hours = String(date.getHours()).padStart(2, '0');
					const minutes = String(date.getMinutes()).padStart(2, '0');
					const seconds = String(date.getSeconds()).padStart(2, '0');
					return `${year}年${month}月${day}日 ${hours}:${minutes}`;
					// return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
				} else {
					// 无法解析日期，返回原始字符串或抛出错误，取决于需求
					return dataStr;
				}
			},
			goback() {

				uni.switchTab({
					url: "/pages/observe/observe"
				})
			},
			//加密
			aes_encrypt(word) {
				var key = CryptoJS.enc.Base64.parse(this.keyStr);
				var iv = CryptoJS.enc.Base64.parse(this.ivStr);

				// var srcs = CryptoJS.enc.Utf8.parse(word);
				var encrypted = CryptoJS.AES.encrypt(word, key, {
					iv: iv,
					mode: CryptoJS.mode.CBC,
					padding: CryptoJS.pad.Pkcs7
				});
				return encrypted.toString();
			},
			// 解密
			aes_decrypt(word) {

				// const restoreBase64 = word.replace(/\-/g,'+').replace(/_/g,'/');
				var restoreBase64 = word.replace(/[\r\n]/g, '');

				var decrypt = CryptoJS.AES.decrypt(restoreBase64, this.keyStr, {
					iv: this.ivStr,
					mode: CryptoJS.mode.CBC,
					padding: CryptoJS.pad.Pkcs7
				});
				return CryptoJS.enc.Utf8.stringify(decrypt).toString();
			},
			copyBtn(item) {
				let _that = this;
				wx.setClipboardData({
					//复制文本
					data: item.fileUrl,
					success: function(res) {
						wx.showToast({
							title: '复制成功',
							icon: 'none',
							mask: 'true' //是否设置点击蒙版，防止点击穿透
						});
					}
				});
			},
			formatArr(arr) {
				return arr.map(item => {
					const date = new Date(item.createTime);
					// const year = date.getFullYear();
					// const month = String(date.getMonth() + 1).padStart(2, '0');
					// const day = String(date.getDate()).padStart(2, '0');
					item.nowMonth = date.getMonth() + 1
					item.nowDay = date.getDate()

					return item
				})
			},

			formatArray(arr) {
				return arr.map(item => {
					const date = new Date(item.createTime);
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					item.nowMonth = month;
					item.nowDay = day

					return item
				})
			},

			getList() {
				let _that = this
				shareChild(_that.params).then(res => {
					console.log(res);
					_that.total = res.data.tatal
					if (res.data.rows.length < _that.total) {
						_that.params.pageNum++
					}
					if (_that.params.pageNum == 1) {
						console.log("-------------------getList--------------");
						_that.tableList = _that.formatArray(res.data.rows)
						_that.evaluateList = _that.formatArr(res.data.evaluateList)
					} else {
						_that.tableList = _that.tableList.concat(_that.formatArray(res.data.rows))
						_that.evaluateList = _that.evaluateList.concat(_that.formatArr(res.data.evaluateList))
					}
					// 孩子详情
					_that.childInfo = res.data.tchild

				})
			},
			// 初始化日期
			initTime() {
				const time = new Date();
				//获得系统年份;
				const year = time.getFullYear();
				//获得系统月份;
				const month = time.getMonth() + 1;
				//获得系统当月分天数;
				const day = time.getDate();
				//获得系统星期几;
				let dayCycle = time.getDay();
				//使用数组更改日期样式;
				const dayCycleArray = ['日', '一', '二', '三', '四', '五', '六'];
				for (let i = 0; i < 7; i++) {
					if (dayCycle == i) {
						//将dayCycleArray的数赋值到系统星期几里面中去;
						dayCycle = dayCycleArray[i];
					}
				}
				this.dateStr = year + '/' + month + '/' + day + ' ';
				this.week = '星期' + dayCycle;
				this.nowMonth = month;
				this.nowDay = day;
				this.nowYear = year;
			},
			// 日期回调
			handleDate(e) {
				console.log(e);
				this.selectDateShow = false;
			},

			// 编辑当前观察记录
			handleEditObserve(item) {
				console.log("itemitem: " + JSON.stringify(item));
				uni.navigateTo({
					url: '/pages-sub/observeAdd/addObserve?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			// 观察分析关闭事件
			handleAnalyzeClose(index) {
				let _that = this
				setTimeout(() => {
					_that.tableList[index].expanded = false;
					_that.$forceUpdate();
				}, 300);

			},
			// 观赏分析展开事件
			handleAnalyzeOpen(index) {
				this.tableList[index].expanded = true;
				this.$forceUpdate();
			},

			lookImg: function(val) {
				const urls = val[0].map(item => {
					return item.url
				})
				const current = val[1]
				console.log(urls);
				console.log(current);

				uni.previewImage({
					urls,
					current
				})
			},


		}
	};
</script>


<style lang="scss">
	page {
		background-color: #fff;
	}


	.header {
		position: fixed;
		height: 430rpx;
		z-index: 991;
		background-color: #fff;

		.header-bg {
			position: fixed;
			top: 0;
			left: 0;
			// z-index: 990;
			width: 100%;
			height: 136px;
		}

		.header-mp {
			width: 686rpx;
			// height: 300rpx;
			position: absolute;
			top: 10rpx;
			left: 32rpx;
			// z-index: 990;
		}

		.header-logo {

			width: 188rpx;
			height: 188rpx;
			border-radius: 50%;
		}

		.header-text {
			flex: 1;
			margin-left: 20px;
			width: 260rpx;
			z-index: 990;

			.name {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #3a3d4b;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;

				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
				background-image: url("");

			}

			.age {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #3a3d4b;
				margin-top: 15rpx;
			}

			// .date {
			// 	margin-top: 294rpx;
			// 	margin-left: 98rpx;
			// }
		}

		.header-dian {
			position: absolute;
			top: 5px;
			right: 10px;
			z-index: 990;
			width: 50px;
			height: 50px;

			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 50rpx;
				height: 10rpx;

			}
		}

		.now-date {
			position: absolute;
			left: 32rpx;
			bottom: 10rpx;

			.record {
				font-size: 34rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #3a3d4b;
			}

			.recordNumber {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #58c866;
			}
		}

		.tab {

			position: absolute;
			left: 32rpx;
			bottom: 10rpx;

			display: flex;
			align-items: center;
			background-color: white;
			margin: 10rpx 30rpx 0 30rpx;
			padding-top: 20rpx;


			.highlight_tab {
				width: 128rpx;
				height: 60rpx;

				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.text {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #3A3D4B;
					line-height: 44rpx;
				}

				.bottom_line {
					background-color: #58C866;
					width: 60rpx;
					height: 8rpx;
					border-radius: 4rpx;
				}

			}

			.normal_tab {
				width: 128rpx;
				height: 60rpx;

				display: flex;
				flex-direction: column;
				justify-content: center;
				justify-content: space-between;

				.text {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #3A3D4B;
					line-height: 40rpx;
				}

			}

		}
	}

	.observe-body {
		width: 100%;

		border-radius: 36rpx 36rpx 0 0;
		margin-top: -50rpx;
		padding-bottom: 50rpx;
		position: relative;
		top: 470rpx;
		z-index: 990;
		background-color: #fff;
		box-sizing: border-box;


		.sticky_container {
			background-color: white;
			padding: 10rpx 0 0 0;

			.tab {
				background-color: #fff;
				display: flex;
				align-items: center;
				margin: 10rpx 30rpx 0 30rpx;
				height: 80rpx;

				.highlight_tab {
					width: 128rpx;
					height: 60rpx;

					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.text {
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #3A3D4B;
						line-height: 44rpx;
					}

					.bottom_line {
						background-color: #58C866;
						width: 60rpx;
						height: 8rpx;
						border-radius: 4rpx;
					}

				}

				.normal_tab {
					width: 128rpx;
					height: 60rpx;

					display: flex;
					flex-direction: column;
					justify-content: center;
					justify-content: space-between;

					.text {
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #3A3D4B;
						line-height: 40rpx;
					}

				}

			}

			.date {
				background-color: #fff;
				height: 80rpx;
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.now-date {
					// margin-top: 32rpx;
					// flex: 1;
				}

				.select-date {
					// margin-top: 32rpx;
					position: relative;
					padding-right: 45rpx;
					// flex: 1;

					&:before {
						content: '';
						width: 0;
						height: 0;
						position: absolute;
						right: 0;
						top: 15rpx;
						border-top: 15rpx solid #3A3D4B;
						border-left: 15rpx solid transparent;
						border-right: 15rpx solid transparent;
					}
				}
			}


		}


		.tableView {
			margin-top: 40rpx;
			background-color: #fff;

			.tableCell {
				display: flex;
				margin: 10rpx 32rpx;

				.leftView {
					flex-grow: 1;

					.day {
						font-size: 28px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #3a3d4b;
					}

					.month {
						margin-left: 10rpx;
						font-size: 18px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #3a3d4b;
					}
				}

				.rightView {
					width: calc(100% - 140rpx);


					.content {
						padding: 10rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						color: #3A3D4B;
						// width: calc(100% - 30rpx);
						word-wrap: break-word;
					}

					.editView {
						display: flex;
						align-items: center;
						margin: 10rpx 0;

						.year-month {
							color: #99a1af;
						}

						.delete {
							margin-left: 30rpx;
							cursor: pointer;

							image {
								width: 28rpx;
								height: 28rpx;
							}
						}

						.edit {
							margin-left: 30rpx;
							cursor: pointer;

							image {
								width: 28rpx;
								height: 28rpx;
							}
						}
					}

					.analyze {
						position: relative;
						background-color: #FAF9E5;

						.u-collapse {
							background-color: #FAF9E5;
							border-radius: 8rpx;
						}

						.u-collapse-item {
							width: 100%;
							word-wrap: break-word;
						}

						// 标题head
						.u-cell__body {
							height: 80rpx;
							padding: 20rpx !important;
						}

						.u-cell__title-text {
							font-size: 28rpx !important;
							color: #3A3D4B !important;
							font-weight: 600;
							padding-left: 42rpx;
							line-height: 40rpx !important;
						}

						.u-cell__value {
							font-size: 26rpx;
							color: #000;
						}

						// 展开箭头
						.u-icon__icon--info {
							color: #000000 !important;
							font-weight: bold !important;
							font-size: 30rpx !important;
						}

						.analyze-icon {
							width: 36rpx;
							height: 36rpx;
							position: absolute;
							left: 20rpx;
							top: 22rpx;
						}

						.analyze-title-bottom {
							width: 126rpx;
							height: 15rpx;
							position: absolute;
							left: 65rpx;
							top: 52rpx;
						}

						.order {
							width: 10rpx;
							height: 10rpx;
							background-color: #3a3d4b;
							border-radius: 50%;
							margin-top: 15rpx;
						}

						.text {
							width: 448rpx;
							margin-left: 10rpx;
							color: #3A3D4B;
						}

						.u-collapse-item__content__text {
							padding: 0 28rpx 28rpx;
							color: #3A3D4B;
						}

						.showAllIN {
							height: auto;
						}

						.hidetext {

							-webkit-line-clamp: 4;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}
					}

					.item-content {
						display: flex;
						align-items: center;
						margin: 20rpx 0;

						.word {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}

						.left-content {
							color: #77798d;
							font-size: 14px;
							white-space: nowrap;
						}

						.right-content {
							display: flex;
							justify-content: space-between;
							align-items: center;
							flex-grow: 1;

							.text {
								text-align: left;

								max-width: 300rpx;
								// width: calc(100% - 30rpx);
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.icon {
								width: 30rpx;
								height: 30rpx;
								margin: 0rpx 20rpx;
							}
						}
					}




				}

			}

		}

		.avatar {
			width: 120rpx;
			height: 60rpx;
			overflow: hidden;

			.day {
				font-size: 44rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #3a3d4b;
			}

			.month {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #3a3d4b;
			}
		}

		.details {
			// width: 540rpx;
			margin-left: 20rpx;
		}

		.content {
			// margin-top: 20rpx;
		}

		.image {
			margin-top: 20rpx;

			image {
				width: 480rpx;
				height: 280rpx;
				border-radius: 10rpx;
			}
		}




		.popup {
			.u-popup__content {
				position: relative;
				border-radius: 24rpx 24rpx 0 0;
				overflow: hidden;
				padding-bottom: 150rpx;
			}

			.u-picker__view {
				height: 360rpx !important;
			}


			.u-toolbar__wrapper__cancel {
				padding: 0;
				position: absolute;
				left: 100rpx;
				bottom: -78rpx;

				width: 200rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.u-toolbar__wrapper__confirm {
				padding: 0;
				position: absolute;
				right: 100rpx;
				bottom: -78rpx;

				width: 200rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}

	.delete-popup {
		.u-popup__content {
			width: 480rpx;
			height: 332rpx;
			border-radius: 20rpx;

			.success-icon {
				display: block;
				width: 128rpx;
				height: 128rpx;
				margin: 48rpx auto 0;
			}

			.success-tips {
				display: block;
				text-align: center;
				margin-top: 10rpx;
			}

			.success-text {
				display: block;
				text-align: center;
				color: #77798d;
				margin-top: 10rpx;
			}

			.u-icon__icon {
				color: #3d3d3d;
			}
		}
	}

	.menu-popup {
		width: 100%;

		.cell {
			height: 70rpx;
			margin: 20rpx 60rpx;
			border-radius: 10rpx;

			.btn {
				height: 100%;
				border: 0rpx solid #58c866;
				background-color: #58c866;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				color: #fff;
			}

		}
	}



	// 删除弹窗
	.delPop {
		width: 480rpx;
		height: 320rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;

		.desc {
			color: #77798D;
			margin: 20rpx auto 40rpx;
		}

		.loginoutBtn {
			display: flex;

			.btn {
				width: 200rpx;
				height: 72rpx;
				color: #58C866;
				background: #FFFFFF;
				border-radius: 44px;
				border: 2rpx solid #58C866;
				text-align: center;
				line-height: 72rpx;
				margin: 0 10rpx;
			}

			.cancel {
				background-color: #58C866;
				color: #fff;
			}
		}
	}

	.add {
		position: fixed;
		right: 20px;
		bottom: 40px;
		z-index: 999;

		width: 108rpx;
		height: 108rpx;

		cursor: move;
		user-select: none;
	}
</style>